<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MQ</title>
	<link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
	<link rel="stylesheet" href="./css/EDAS.css" type="text/css" />

	<link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
	<style type="text/css">
		.fakeloader {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			z-index: 999;
			background-image: url(../bgAll/img/bg.png);
		}

		.toCenter {
			top: 0;
		}

		.col75 {
			width: 80%;
		}

		html,
		body {
			overflow: hidden;
		}

		.middleBegin {
			background-color: rgba(112, 146, 190, 0.4);
			width: 450px;
			height: 450px;
			transform: rotateX(60deg) rotateZ(45deg);
			-webkit-transform: rotateX(60deg) rotateZ(45deg);
			-moz-transform: rotateX(60deg) rotateZ(45deg);
		}

		.middleDone {
			width: 1000px;
			height: 1000px;
			transform: rotateX(0deg) rotateZ(0deg);
			-webkit-transform: rotateX(0deg) rotateZ(0deg);
			-moz-transform: rotateX(0deg) rotateZ(0deg);
		}

		.cacheFloor {
			top: 138px;
		}
		section {
			width: 650px;
		}

		.edasLineDiv {
			width: 100%;
			height: 100%;
			text-align: center;
		}

		.edasLineDiv .edasLineImg {
			width: 100%;
			height: 100%;
		}

		.edasLineDiv > div {
			margin: 20px 15px;
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		.edasLineDiv div img {
			height: 80px;
		}

		.edas-line-iv-middle {
			cursor: pointer;
			position: relative;
		}

		.edas-line-iv-middle > img {
			position: absolute;
			width: 650px;
			left: 0;
			top: 0;
		}

		.edas-line-iv-middle > div {
			position: relative;
			margin: 0;
			width: 120px;
		}

		.edas-line-iv-middle div img {
			height: 100px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		.edas-line-iv-middle div img:hover{
			height: 110px;
		}
		.edas-line-iv-middle div a > span{
			color: #f0efee;
			position: relative;
			top: 250px;
		}
		.iconborder{
			height: 110px;
			width: 110px;
			position: relative;
			margin-bottom: 10px;
		}
		.iconborder .iconRando{
			background: url(img/navIcon.png) no-repeat;
			background-position: -3px -3px;
			height: 110px;
			width: 110px;
		}
		.iconborder .iconRando-heart{
			position: absolute;
			left:0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 70px;
			width: 70px;
			margin-top: 17px;
		}
		.under_section{
			margin: auto!important;
			width: 800px;
		}
		.under_section .under_div{
			width: 20%;
			display: inline-block;
			margin-right:5%;
		}
		.under_section .under_div:last-child{
			margin-right:0%;
		}
		.under_section .under_div under_arrow{
			position: relative;
			height: 120px;
		}
		.under_section .under_div under_arrow img{
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
		}
		.under_section .under_box{
			background: url('img/under.png');
			background-size: 100% 100%;
			width: 100%;height: 89px;
		}
		.under_section .under_box p:first-child{
			line-height: 55px;
		}
		.canvas_div{
			margin: auto;
			width: 650px;
			position:relative;
		}

		.onhover{
			-webkit-animation: shineFrame 2s ease-in-out 0s infinite;
			-moz-animation: shineFrame 2s ease-in-out 0s infinite;
			-o-animation: shineFrame 2s ease-in-out 0s infinite;
			animation: shineFrame 2s ease-in-out 0s infinite;
		}
	</style>

</head>

<body class="wrap">

<div class="fakeloader"></div>

<div class="mod-star-list">
	<div class="inner"></div>
</div>
<!-- header Start -->
<div id="header" class="mt12 clearfix" style="margin-left:10px">
	<div class="header-left">
		<a href="../DRDS/index.html" class="clearfix">
			<div class="bg-next rotate5 btn"></div>
			<p>浏览下一个产品</p>
		</a>
	</div>
	<div class="header-right">
		<div class="header-open">消息队列<span style="color:#90b8f1;font-size:14px">MQ</span>
			<p>Message Queue</p>
		</div>
	</div>
</div>
<!-- header End -->
<div class="content" style="height: 100%;width: 100%;">
	<!-- 正文开始  -->
	<div class="toCenter" style="height: 100%;margin-top: 50px;widows:100%;position: relative">
		<div style="position: absolute;height: 350px;width:350px;top:20px;left: calc(50% - 400px - 350px);">
			<div style="height: 50%;position: relative;text-align: center;">
				<img style="position: absolute;top: 0;right: 80px;bottom: 0;margin: auto;" src="img/cars.png" />
				<img style="position: absolute;top: 0;right: 0;bottom: 0;margin: auto;width: 80px;" src="img/meet.png" />
				<canvas id="left0" style="right: -70px;bottom: 107px;"></canvas>
				<canvas id="right0" style="right: -70px;bottom: 57px;"></canvas>
			</div>
			<div style="height: 50%;position: relative;text-align: center;">
				<img style="position: absolute;top: 0;right: 80px;bottom: 0;margin: auto;" src="img/mobile.png" />
				<img style="position: absolute;top: 0;right: 0;bottom: 0;margin: auto;width: 80px;" src="img/https.png" />
				<canvas id="left1" style="right: -70px;bottom: 107px;"></canvas>
				<canvas id="right1" style="right: -70px;bottom: 57px;"></canvas>
			</div>
		</div>
		<div class="canvas_div" style="left: 0;top:0px;">
			<canvas id="db0" style="left: calc(25% - 128px);top: 14px;"></canvas>
			<canvas id="db1" style="left: calc(25% - 108px);top: 5px;"></canvas>
			<canvas id="db3" style="left: calc(50% - 120px);top: 5px;"></canvas>
			<canvas id="db4" style="left: calc(50% - 57px);top: 14px;"></canvas>
			<canvas id="db5" style="left: calc(75% - 35px);top: 5px;"></canvas>
			<canvas id="db6" style="left: calc(75% - 61px);top: 11px;"></canvas>
		</div>
		<section id="mainSection" style="width:800px;height:350px;margin: auto;margin-top: 100px;">
			<div style="text-align: center;position: relative;top: 75px;"><h1>企业级分布式应用服务</h1></div>
			<div class="edasLineDiv edas-line-iv-middle">
				<img class="edasLineImg shineAction" src="img/zhongjiankuang.png" />
				<div>
					<a href="details.html?list=1">
						<img src="img/sixArrow.png" />
						<span>专业&验证</span>
					</a>
				</div>
				<div>
					<a href="details.html?list=2">
						<img src="img/sixArrow.png" />
						<span>技术体系</span>
					</a>
				</div>
				<div>
					<a href="details.html?list=3">
						<img src="img/sixArrow.png" />
						<span>独立部署</span>
					</a>
				</div>
				<div>
					<a href="details.html?list=4">
						<img src="img/sixArrow.png" />
						<span>高可靠</span>
					</a>
				</div>
				<div>
					<a href="details.html?list=5">
						<img src="img/sixArrow.png" />
						<span>高性能</span>
					</a>
				</div>
				<div>
					<a href="details.html?list=6">
						<img src="img/sixArrow.png" />
						<span>多协议</span>
					</a>
				</div>
			</div>
		</section>

		<section class="under_section">
			<div class="under_div">
				<div class="under_arrow" style="height: 76px;">
					<!--<img src="img/under_arrow.png" />-->
				</div>
				<div class="under_box">
					<p>应用A</p>
					<p>MQ Clant(Java)</p>
				</div>
				<img src="img/under_logo_1.png" style="margin-top: 30px;cursor: default;" />
			</div>
			<div class="under_div">
				<div class="under_arrow">
					<!--<img src="img/under_arrow.png" />-->
				</div>
				<div class="under_box">
					<p>应用B</p>
					<p>MQ Clant(C++)</p>
				</div>
				<img src="img/under_logo_2.png" style="margin-top: 30px;cursor: default;" />
			</div>
			<div class="under_div">
				<div class="under_arrow">
					<!--<img src="img/under_arrow.png" />-->
				</div>
				<div class="under_box">
					<p>应用C</p>
					<p>MQ Clant(.Net)</p>
					<div></div>
				</div>
				<img src="img/under_logo_3.png" style="margin-top: 30px;cursor: default;" />
			</div>
			<div class="under_div">
				<div class="under_arrow">
					<!--<img src="img/under_arrow.png" />-->
				</div>
				<div class="under_box">
					<p>应用D</p>
					<p>MQ Clant(Http)</p>
				</div>
				<img src="img/under_logo_4.png" style="margin-top: 30px;cursor: default;" />
			</div>
		</section>
		<div style="margin:auto;width: 800px;position:relative;left: 0;top:-208px;">
			<canvas id="app0" style="left: 11px;"></canvas>
			<canvas id="app1" style="left: 65px;"></canvas>
			<canvas id="app3" style="left: calc(25% + 15px);"></canvas>
			<canvas id="app4" style="left: calc(25% + 70px);"></canvas>
			<canvas id="app5" style="left: calc(50% + 19px);"></canvas>
			<canvas id="app6" style="left: calc(50% + 77px);"></canvas>
			<canvas id="app7" style="left: calc(75% + 23px);"></canvas>
			<canvas id="app8" style="left: calc(75% + 80px);"></canvas>
		</div>

	</div>
	<!-- 正文结束  -->
</div>
<footer class="clearfix">
	<div class="footer-left fl">
		<a href="../index.html?goods=goods1" class="back shineAction"></a>
		<div class="backText">返回主菜单</div>
	</div>
	<div class="footer-right fr">
		<a href="" class="refresh shineAction"></a>
		<div class="refreshText">刷新&nbsp;</div>
	</div>
</footer>
</body>
<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript" src='./js/common.js'></script>

<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript" src='../bgAll/js/star.js'></script>
<script type="text/javascript" src='js/index.js'></script>
<script type="text/javascript" src='js/MQ.js'></script>

</html>